<template>
<div class='' style="margin: auto;width: 1200px;">
    <el-page-header content="离职记录" style="font-family: '楷体';font-weight: bold;">
    </el-page-header>
    <el-row>
        <span style="font-family: '楷体';font-weight: bold;font-size: 30px;">离职信息</span>
        <el-table :data="pageInfoDim.list" label="离职信息" border style="width: 100%">
            <el-table-column prop="eno" label="职工编号" width="150">
            </el-table-column>
            <el-table-column prop="ename" label="职工姓名" width="120">
            </el-table-column>
            <el-table-column prop="dimissioncause" label="离职原由" width="120">
            </el-table-column>
            <el-table-column prop="einputDate" label="入职日期" width="160">
            </el-table-column>
            <el-table-column prop="dimissiondate" label="离职日期" width="160">
            </el-table-column>
            <el-table-column prop="stationname" label="职工岗位" width="120">
            </el-table-column>
            <el-table-column prop="groupname" label="部门组" width="100">
            </el-table-column>
            <el-table-column label="离职状态" width="100">
                <template slot-scope="temp">
                    {{temp.row.stateid | filterDim}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope" >
                    <el-button type="primary" @click="rollback(scope.row.eid,scope.row.stateid)" plain>回滚</el-button>
                    <el-button type="warning" @click="removeDim(scope.row.dimissionid)" style="margin-left: 0px;" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  :background="true" :pager-count="4" @size-change="handleSizeChangeDim" @current-change="handleCurrentChangeDim" :current-page="pageInfoDim.pageNum" :page-size="pageInfoDim.pageSize" :total="pageInfoDim.total" :page-sizes="[3,6]" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </el-row>
    <el-row>
        <span style="font-family: '楷体';font-weight: bold;font-size: 30px;">职工信息</span>
        <el-table :data="pageInfoEmp.list" label="离职信息" border style="width: 100%">
            <el-table-column width="100" prop="dename" label="部门名称">
            </el-table-column>
            <el-table-column width="100" prop="stationname" label="岗位名称">
            </el-table-column>
            <el-table-column width="100" prop="eno" label="工号">
            </el-table-column>
            <el-table-column width="100" prop="ename" label="姓名">
            </el-table-column>
            <el-table-column width="100" prop="eaccount" label="账号">
            </el-table-column>
            <el-table-column width="100" label="性别">
                <template slot-scope="temp">
                    {{temp.row.esex | filterSex}}
                </template>
            </el-table-column>
            <el-table-column width="120" prop="ephone" label="电话">
            </el-table-column>
            <el-table-column width="160" prop="einputDate" label="入职日期">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="info" @click="getDialog(scope.row.eid)">离职</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  :background="true" :pager-count="4" @size-change="handleSizeChangeEmp" @current-change="handleCurrentChangeEmp" :current-page="pageInfoEmp.pageNum" :page-size="pageInfoEmp.pageSize" :total="pageInfoEmp.total" :page-sizes="[3,6]" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </el-row>
    <el-dialog title="离职登记" :visible.sync="dialogFormVisible">
        <el-form :model="diminfo">
            <el-form-item label="离职原因" :label-width="formLabelWidth">
                <el-input v-model="diminfo.dimissioncause"></el-input>
            </el-form-item>
            <el-form-item label="离职日期" :label-width="formLabelWidth">
                <el-date-picker
                    v-model="diminfo.dimissiondate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dimission">提交</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
    pageInfoDim:{},//离职信息
    pageInfoEmp:{},//职工信息
    dialogFormVisible:false,
    diminfo:{
        dimissioncause:'',
        dimissiondate:'',
        eid:''
    }//离职信息记录
};
},
//计算属性
computed: {},
//方法集合
methods: {
    handleSizeChangeDim(val) {
        this.goToPageDim(this.pageInfoDim.pageNum, val);
    },
    handleCurrentChangeDim(val) {
        this.goToPageDim(val, this.pageInfoDim.pageSize);
    },
    handleSizeChangeEmp(val) {
        this.goToPageEmp(this.pageInfoEmp.pageNum, val);
    },
    handleCurrentChangeEmp(val) {
        this.goToPageEmp(val, this.pageInfoEmp.pageSize);
    },
    goToPageDim(p, s) {
        let _this = this;
        this.$http.get(`http://localhost:8080/api/dim/${p}/${s}`).then(function(resp) {
            _this.pageInfoDim = resp.data;
        });
    },
    goToPageEmp(p, s) {
        let _this = this;
        this.$http.get(`http://localhost:8080/api/dim/emp/${p}/${s}`).then(function(resp) {
            _this.pageInfoEmp = resp.data;
        });
    },
    getDialog(eid){
        let _this = this;
        _this.dialogFormVisible=true;
        _this.diminfo.eid=eid;
    },
    dimission(){
        let _this = this;
        let eid=_this.diminfo.eid;
        this.$http.post(`http://localhost:8080/api/dim/add`,_this.diminfo).then(function(resp) {
            if(resp.data.code=="200"){
                // this.$http.get(`http://localhost:8080/api/dim/modifyDim/${eid}`).then(function(resp) {
                //     if(resp.data.code=="200"){
                        _this.$message({
                            message: '新增离职成功!',
                            center: true,
                            type: 'success'
                        });
                        _this.diminfo={
                            dimissioncause:'',
                            dimissiondate:'',
                            eid:''
                        };
                        _this.dialogFormVisible=false;
                        _this.goToPageDim(1,3);
                        _this.goToPageEmp(1,3);
                //     }
                // });
            }
        });
    },
    rollback(eid,did){
        let _this = this;
        if(did==0){
            _this.$message({
                message: '不能对未离职的员工操作!',
                center: true,
                type: 'warning'
            });
        }else{
            this.$http.get(`http://localhost:8080/api/dim/modifyWork/${eid}`).then(function(resp) {
                if(resp.data.code=="200"){
                    _this.$message({
                        message: '员工回滚成功!',
                        center: true,
                        type: 'success'
                    });
                    _this.dialogFormVisible=false;
                    _this.goToPageDim(1,3);
                    _this.goToPageEmp(1,3);
                }
            });
        }
    },
    removeDim(did){
        let _this = this;
        this.$confirm('是否删除离职信息(删除后将无法回滚!!!), 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$http.delete(`http://localhost:8080/api/dim/remove/${did}`).then(function(resp) {
            if(resp.data.code=="200"){
                _this.$message({
                    message: '删除离职信息成功!',
                    center: true,
                    type: 'success'
                });
                _this.goToPageDim(1,3);
            }
        });
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            });          
        });
    }
},
//挂载完成（可以访问DOM元素）
mounted() {
    this.goToPageDim(1,3);
    this.goToPageEmp(1,3);
},
filters: {
    filterSex(val) {
        return val == 0 ? '男' : '女';
    },
    filterDim(val) {
        return val == 0 ? '未离职' : '已离职';
    }
},
//监控data中的数据变化
watch: {

},


}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/

</style>